<layout name="home" />
<block name="content">
	<style>
		<
		style > #content_wrap {
			background: #fff !important;
		}
		.chat-user {
			border-radius: 3px;
			box-sizing: border-box;
			cursor: pointer;
			height: 60px;
			line-height: 60px;
			padding-top: 5px;
			padding-right: 5px;
			padding-left: 5px;
			margin-top: 5px;
			margin-bottom: 5px;
			position: relative;
		}
		.chat-avatar {
			border-bottom-color: rgb(51, 51, 51);
			border-bottom-left-radius: 100%;
			border-bottom-right-radius: 100%;
			border-bottom-style: none;
			border-bottom-width: 0px;
			border-image-outset: 0px;
			border-image-repeat: stretch;
			border-image-slice: 100%;
			border-image-source: none;
			border-image-width: 1;
			border-left-color: rgb(51, 51, 51);
			border-left-style: none;
			border-left-width: 0px;
			border-right-color: rgb(51, 51, 51);
			border-right-style: none;
			border-right-width: 0px;
			border-top-color: rgb(51, 51, 51);
			border-top-left-radius: 100%;
			border-top-right-radius: 100%;
			border-top-style: none;
			border-top-width: 0px;
			box-sizing: content-box;
			color: rgb(51, 51, 51);
			cursor: pointer;
			height: 50px;
			line-height: 50px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			text-align: left;
			vertical-align: top;
			white-space: nowrap;
			width: 50px;
			-webkit-user-select: none;
		}
		.chat-user-name {
			box-sizing: content-box;
			color: rgb(51, 51, 51);
			font-size: 16px;
			height: 50px;
			line-height: 50px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			overflow-x: hidden;
			overflow-y: hidden;
			padding-left: 10px;
			text-align: left;
			text-overflow: ellipsis;
			vertical-align: top;
			white-space: nowrap;
			-webkit-user-select: none;
		}
		#talk_list .active {
			background: #f3f3f3;
		}
		.chat-message {
			padding-bottom: 15px;
		}
		.message-content {
			display: block;
			background: #fff;
		}
		.new_count {
			background-color: rgb(237, 85, 101);
			background-image: none;
			background-origin: padding-box;
			background-size: auto;
			border-bottom-left-radius: 6px;
			border-bottom-right-radius: 6px;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
			color: rgb(240, 240, 240);
			cursor: auto;
			display: block;
			font-size: 12px;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			height: 20px;
			letter-spacing: 1px;
			line-height: 20px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			padding-bottom: 0px;
			padding-left: 4px;
			padding-right: 4px;
			padding-top: 0px;
			position: absolute;
			right: 10px;
			text-align: center;
			top: 20px;
		}
		.message-avatar {
			border-bottom-color: rgb(51, 51, 51);
			border-bottom-left-radius: 100%;
			border-bottom-right-radius: 100%;
			border-bottom-style: none;
			border-bottom-width: 0px;
			border-image-outset: 0px;
			border-image-repeat: stretch;
			border-image-slice: 100%;
			border-image-source: none;
			border-image-width: 1;
			border-left-color: rgb(51, 51, 51);
			border-left-style: none;
			border-left-width: 0px;
			border-right-color: rgb(51, 51, 51);
			border-right-style: none;
			border-right-width: 0px;
			border-top-color: rgb(51, 51, 51);
			border-top-left-radius: 100%;
			border-top-right-radius: 100%;
			border-top-style: none;
			border-top-width: 0px;
			box-sizing: content-box;
			color: rgb(51, 51, 51);
			cursor: pointer;
			height: 50px;
			line-height: 50px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			text-align: left;
			vertical-align: top;
			white-space: nowrap;
			width: 50px;
			-webkit-user-select: none;
			border: 1px solid #ccc;
		}
		.message-user {
			position: relative;
		}
		.message-date {
			margin-left: 15px;
			position: absolute;
		}
		.message {
			background-color: rgb(95, 184, 120);
			border-bottom-left-radius: 3px;
			border-bottom-right-radius: 3px;
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			box-sizing: content-box;
			color: rgb(255, 255, 255);
			display: inline-block;
			font-size: 14px;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			line-height: 22px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			margin-bottom: 0px;
			margin-left: 65px;
			margin-right: 0px;
			margin-top: -25px;
			max-width: none;
			padding-bottom: 8px;
			padding-left: 15px;
			padding-right: 15px;
			padding-top: 8px;
			position: relative;
			text-align: left;
			vertical-align: top;
			word-break: break-all;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
		.chat-message.send {
			text-align: right;
			width: 100%;
		}
		.chat-message.send .message-date {
			margin-right: 15px;
			position: relative;
			width: 100%;
		}
		.chat-message.send .message {
			margin-right: 65px;
			margin-top: -25px;
		}
		.t_count {
			background-attachment: scroll;
			background-clip: border-box;
			background-color: rgb(237, 85, 101);
			background-image: none;
			background-origin: padding-box;
			background-size: auto;
			border-bottom-left-radius: 6px;
			border-bottom-right-radius: 6px;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
			color: rgb(240, 240, 240);
			cursor: auto;
			display: block;
			font-size: 12px;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			height: 20px;
			letter-spacing: 1px;
			line-height: 20px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			padding-bottom: 0px;
			padding-top: 0px;
			padding-left: 4px;
			padding-right: 4px;
			position: absolute;
			right: -10px;
			text-align: center;
			text-shadow: rgba(255, 255, 255, 0.298039) 0px 0px 1px;
			text-transform: uppercase;
			top: -5px;
		}
		.operate-panel a {
			position: relative;
		}
		.operate-panel .btn {
			margin-left: 15px;
		}
	</style>
	<div class="row main box" style="padding-left:15px;padding-right:15px;">
		{:widget('page_header/simple',array('name'=>'客服中心'))}
		<div class="operate-panel">
			<a class="btn btn-link active" onclick="todo_list()">等待接入<span class="t_count hidden" id="todo_count"></span></a>
			<a class="btn btn-link " onclick="index()">处理中<span class="t_count hidden" id="index_count"></span></a>
			<a class="btn btn-link" onclick="finish_list()">已完成</a>
			<div class="mid"></div>
			<a class="btn btn-normal" onclick="let_me_do()">我来处理</a>
			<a class="btn btn-normal" onclick="mark_finish()">标记为已完成</a>
		</div>
		<div class="w28 m100 frame" style="max-height:700px;overflow-y: auto;background: #D9D9D9;">
			<div class="tree-menu">
				<div id="talk_list">
					<foreach name="kf_vistor_list" val="kf_vistor">
						<div class="chat-user" data="{$kf_vistor.openid}">
							<img class="chat-avatar" src="{$kf_vistor.headimgurl}" alt="" >
							<span class="chat-user-name">{$kf_vistor.nickname}</span>
							<span class="new_count hidden"></span>
						</div>
					</foreach>
				</div>
			</div>
		</div>
		<div style="width:16px;"></div>
		<div class="x1 frame m100" style="height:700px;">
			<div class="content-wrap" style="height:670px;margin-bottom: 10px;overflow-y: scroll" id="content_wrap"></div>
		</div>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		layui.use(['global', 'uploader', 'editor'], function() {
			var fn = {
				index : function() {
					window.open('{:url("index")}', '_self');
				},
				todo_list : function() {
					window.open('{:url("todo")}', '_self');
				},
				finish_list : function() {
					window.open('{:url("finish")}', '_self');
				},
				let_me_do : function() {
					$open_id = $('#talk_list .chat-user.active').attr('data');
					if ($open_id == undefined) {
						layer.msg('请选择人员');
						return false;
					}
					var vars = {};
					vars.open_id = $open_id;
					send_ajax('{:url("let_me_do")}', vars, function(ret) {
						if (ret.status) {
							layer.msg(ret.info, {
								time : 1200
							}, function() {
								location.reload(true);
							});
						}
					});
				},
				mark_finish : function() {
					$open_id = $('#talk_list .chat-user.active').attr('data');
					if ($open_id == undefined) {
						layer.msg('请选择人员');
						return false;
					}
					var vars = {};
					vars.open_id = $open_id;
					send_ajax('{:url("mark_finish_from_todo")}', vars, function(ret) {
						if (ret.status) {
							layer.msg(ret.info, {
								time : 1200
							}, function() {
								location.reload(true);
							});
						}
					});
				}
			};
			win_exp(fn);

			$('#talk_list .chat-user').on('click', function() {
				$('#talk_list .chat-user.active').removeClass('active');
				$this = $(this);
				$id = $this.attr('data');
				vars = "from_user_name=" + $id;
				$this.addClass('active');
				send_ajax('{:url("get_talk_todo")}', vars, function(ret) {
					html = '';
					for (s in ret) {
						html += parse_msg_receive(ret[s].nickname, ret[s].create_time, ret[s].headimgurl, ret[s].content);
					}
					$("#content_wrap").html(html);
				});
			});

			//解析消息发送样式
			function parse_msg_receive(user, time, avar, message) {
				var _html = '<div class="chat-message">';
				_html += '<div class="message-user">';
				_html += '<img class="message-avatar" src="' + avar + '" alt="">';
				_html += '<span class="message-date"> ' + user + '&nbsp;&nbsp;&nbsp;' + int_to_date(time, 'MM-dd hh:mm:ss') + '</span>';
				_html += '</div>';
				_html += '<div class="message">' + message + '</div></div>';

				return _html;
			}

			function new_msg(msg) {
				total = 0;
				send_ajax('{:url("get_new_msg_count")}', {}, function(ret) {
					console.log(ret);
					for (s in ret) {
						if (ret[s] > 0) {
							total += parseInt(ret[s]) * 1;
							$("#talk_list .chat-user[data='" + s + "'] .new_count").text(ret[s]);
							$("#talk_list .chat-user[data='" + s + "'] .new_count").removeClass('hidden');
						}
					}
				});
				if (total > 0) {
					$("#index_count").text(total);
					$("#index_count").removeClass('hidden');
				} else {
					$("#index_count").addClass('hidden');
				}
				$active_talk_id = $("#talk_list .active").attr('data');
				if ($active_talk_id == msg.talk_id) {
					var vars = {};
					vars.id = msg.talk_id;
					send_ajax('{:url("get_talk_content")}', vars, function(ret) {
						html = '';
						for (s in ret) {
							if (ret[s].action_type == 'receive') {
								html += parse_msg(ret[s].nickname, ret[s].create_time, ret[s].headimgurl, ret[s].content);
							} else {
								html += parse_msg(ret[s].user_name, ret[s].create_time, './uploads/avatar/' + ret[s].emp_no + '.png', ret[s].content);
							}
						}
						$("#content_wrap").html(html);
						$('#msg_box').val('');
						setTimeout(function() {
							$('#content_wrap').scrollTop(100000);
						}, 200);
					});
				}
			}

			function new_todo() {
				var total = 0;
				send_ajax('{:url("get_new_todo_count")}', {}, function(ret) {
					for (s in ret) {
						total += ret[s] * 1;
						$("#talk_list .chat-user[data='" + s + "'] .new_count").text(ret[s]);
						$("#talk_list .chat-user[data='" + s + "'] .new_count").removeClass('hidden');
					}
					if (total > 0) {
						$("#todo_count").text(total);
						$("#todo_count").removeClass('hidden');
					} else {
						$("#todo_count").addClass('hidden');
					}
				});

			}

			new_todo();
			var ws = {
				count : 0,
				retry : 10,
				server : '127.0.0.1',
				port : 1001,
				inited : 0,
				socket : null,
				bind_url : '{:url("bind")}',
				connect : function() {
					ws.socket = new WebSocket('ws://' + ws.server + ':' + ws.port);
					ws.socket.onopen = function() {
						console.log('1-> 握手');
						console.log('2-> 发送初始化');
						var request = {};
						request.type = 'init';
						ws.send(request);
					};
					ws.socket.onmessage = function(ret) {
						var msg = JSON.parse(ret.data);
						console.log(msg);
						switch(msg.type) {
						case 'init':
							ws.init(msg);
							return;

						case 'online':
							ws.online(msg);
							return;

						case 'new_todo':
							new_todo(msg);
							return;

						case 'new_msg':
							new_msg(msg);
							return;

						case 'notify':
							return;

						case 'message':
							console.log(msg);
							return;
						}
					};
					ws.socket.onclose = function() {
						ws.count++;
						if (ws.retry > ws.count) {
							ws.connect();
						}
					};
					ws.socket.onerror = function() {
						ws.count++;
						if (ws.retry > ws.count) {
							ws.connect();
						};
					};
				},
				send : function(data) {
					console.log(data);
					if (this.socket && this.socket.readyState == 1) {
						this.socket.send(JSON.stringify(data));
					}
				},
				send_heat_beat : function() {
					var request = {};
					request.type = 'ping';
					if (this.socket && this.socket.readyState == 1) {
						this.socket.send(JSON.stringify(request));
					}
				},
				init : function(ret) {
					console.log('3-> 接受client_id');
					console.log(ret);
					$.post(ws.bind_url, ret, function(ret) {
						console.log(ret);
					});

					setInterval(function() {
						ws.send_heat_beat();
					}, 12000);
				},
				online : function(ret) {
					console.log(ret);
				}
			};

			ws.server = "127.0.0.1";
			ws.port = 8282;
			ws.connect();
		});
	</script>
</block>